<template>
  <div class="Dom">
    <div class="leftDom">
      <template v-if="bmInfo.length > 1">
        <el-text class="mx-1" style="margin: 0 15px">部门：</el-text>
        <el-select v-model="bm" placeholder="请选择部门名称" style="width: 200px">
          <el-option v-for="(item, index) in bmInfo.filter(v => v.name != '预报中心')" :key="index" :label="item.name"
            :value="item.name" />
        </el-select>
      </template>

      <!-- <el-button type="primary" plain style="margin: 0 15px">查询</el-button> -->

      <el-text class="mx-1" style="margin: 0 15px">视角类型：</el-text>
      <el-select v-model="view" placeholder="请选择视角" style="width: 200px">
        <el-option v-for="(item, index) in views" :key="index" :label="item.name" :value="item" />
      </el-select>

      <div style="padding-left: 0px">
        <el-card style="margin: 15px 5px;margin-right: 15px;">
          <template #header>{{ view.name }} </template>
          <div>
            <div style="margin-bottom: 20px">
              <span style="font-weight: bold">默认视角：</span>
            </div>
            <div style="margin-bottom: 20px">
              <span>中心经度：</span>
              <el-input v-model="data.lon" style="width: 240px" placeholder="输入经度" />

            </div>
            <div style="margin-bottom: 20px">
              <span>中心纬度：</span>
              <el-input v-model="data.lat" style="width: 240px" placeholder="输入纬度" />

            </div>
            <div>
              <span>缩放层级：</span>
              <el-input v-model="data.zoom" style="width: 240px" placeholder="输入层级" />

            </div>
            <div style="text-align: center">
              <el-button type="primary" style="margin: 15px 25px" @click="handleGetData">从地图获取</el-button>
              <el-button type="success" style="margin: 15px 25px" @click="handleSave">保存</el-button>
            </div>
          </div>
        </el-card>
      </div>

      <div style="padding: 5px 20px;display: none;">
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item title="进入系统默认视角" name="1">
            <div style="padding-left: 20px">
              <el-card style="max-width: 35vw; margin: 15px 0">
                <template #header>进入系统默认视角 </template>

                <div>
                  <div style="margin-bottom: 20px">
                    <span style="font-weight: bold">默认视角：</span>
                  </div>
                  <div style="margin-bottom: 20px">
                    <span>中心经度：</span>
                    <el-input v-model="inputLon" :disabled="!isEditing1" style="width: 240px"
                      placeholder="Please input" />
                    <span style="margin-top: 20px; margin-left: 25px">
                      <el-button v-if="!isEditing1" type="primary" @click="changeLon"
                        style="margin-left: 30px">更改</el-button>
                      <el-button v-else type="warning" @click="okEditing1">确定</el-button>
                    </span>
                  </div>
                  <div style="margin-bottom: 20px">
                    <span>中心纬度：</span>
                    <el-input v-model="inputLat" :disabled="!isEditing2" style="width: 240px"
                      placeholder="Please input" />
                    <span style="margin-top: 20px; margin-left: 25px">
                      <el-button v-if="!isEditing2" type="primary" @click="changeLat"
                        style="margin-left: 30px">更改</el-button>
                      <el-button v-else type="warning" @click="okEditing2">确定</el-button>
                    </span>
                  </div>
                  <div>
                    <span>缩放层级：</span>
                    <el-input v-model="inputScale" :disabled="!isEditing3" style="width: 240px"
                      placeholder="Please input" />
                    <span style="margin-top: 20px; margin-left: 25px">
                      <el-button v-if="!isEditing3" type="primary" @click="changeScale"
                        style="margin-left: 30px">更改</el-button>
                      <el-button v-else type="warning" @click="okEditing3">确定</el-button>
                    </span>
                  </div>
                  <div style="text-align: center">
                    <el-button type="primary" style="margin: 15px 25px">从地图获取</el-button>
                  </div>
                </div>
              </el-card>
            </div>
          </el-collapse-item>
          <el-collapse-item title="海风视角" name="2">
            <div style="padding-left: 20px">
              <el-card style="max-width: 35vw; margin: 15px 0">
                <template #header>海风数据源配置 </template>

                <div>
                  <!-- <div style="margin-top: 5px">
            <div style="width: 100px">海风nc模板：</div>
            <el-input
              v-model="inputWindNc"
              :disabled="!isEditingWindNc"
              style="width: 290px"
              placeholder="Please input"
            />
            <span style="margin-top: 20px; margin-left: 25px">
              <el-button
                v-if="!isEditingWindNc"
                type="primary"
                @click="changeWindNc"
                style="margin-left: 30px"
                >更改</el-button
              >
              <el-button v-else type="warning" @click="okEditingWindNc"
                >确定</el-button
              >
            </span>
          </div> -->
                  <div style="margin-bottom: 20px">
                    <div style="width: 100px">中心经度：</div>
                    <el-input v-model="inputLonWind" :disabled="!isEditingWind1" style="width: 290px"
                      placeholder="Please input" />
                    <span style="margin-top: 20px; margin-left: 25px">
                      <el-button v-if="!isEditingWind1" type="primary" @click="changeLonWind"
                        style="margin-left: 30px">更改</el-button>
                      <el-button v-else type="warning" @click="okEditingWind1">确定</el-button>
                    </span>
                  </div>
                  <div style="margin-bottom: 20px">
                    <div style="width: 100px">中心纬度：</div>
                    <el-input v-model="inputLatWind" :disabled="!isEditingWind2" style="width: 290px"
                      placeholder="Please input" />
                    <span style="margin-top: 20px; margin-left: 25px">
                      <el-button v-if="!isEditingWind2" type="primary" @click="changeLatWind"
                        style="margin-left: 30px">更改</el-button>
                      <el-button v-else type="warning" @click="okEditingWind2">确定</el-button>
                    </span>
                  </div>
                  <div>
                    <div style="width: 100px; line-height: 35px; height: 35px">
                      缩放层级：
                    </div>
                    <el-input v-model="inputScaleWind" :disabled="!isEditingWind3" style="width: 290px"
                      placeholder="Please input" />
                    <span style="margin-top: 20px; margin-left: 25px">
                      <el-button v-if="!isEditingWind3" type="primary" @click="changeScaleWind"
                        style="margin-left: 30px">更改</el-button>
                      <el-button v-else type="warning" @click="okEditingWind3">确定</el-button>
                    </span>
                  </div>
                  <div style="text-align: center">
                    <el-button type="primary" style="margin: 15px 25px">从地图获取</el-button>
                  </div>
                </div>
              </el-card>
            </div>
          </el-collapse-item>
          <el-collapse-item title="海浪视角" name="3">
            <div style="padding-left: 20px">
              <el-card style="max-width: 35vw; margin: 15px 0">
                <template #header>海浪数据源配置</template>

                <div>
                  <!-- <div style="margin-top: 5px">
            <div style="width: 100px; line-height: 35px; height: 35px">
              海浪nc模板：
            </div>
            <el-input
              v-model="inputWaveNc"
              :disabled="!isEditingWaveNc"
              style="width: 290px"
              placeholder="Please input"
            />
            <span style="margin-top: 20px; margin-left: 25px">
              <el-button
                v-if="!isEditingWaveNc"
                type="primary"
                @click="changeWaveNc"
                style="margin-left: 30px"
                >更改</el-button
              >
              <el-button v-else type="warning" @click="okEditingWaveNc"
                >确定</el-button
              >
            </span>
          </div> -->
                  <div style="margin-bottom: 20px">
                    <div style="width: 100px; line-height: 35px; height: 35px">
                      中心经度：
                    </div>
                    <el-input v-model="inputLonWave" :disabled="!isEditingWave1" style="width: 290px"
                      placeholder="Please input" />
                    <span style="margin-top: 20px; margin-left: 25px">
                      <el-button v-if="!isEditingWave1" type="primary" @click="changeLonWave"
                        style="margin-left: 30px">更改</el-button>
                      <el-button v-else type="warning" @click="okEditingWave1">确定</el-button>
                    </span>
                  </div>
                  <div style="margin-bottom: 20px">
                    <div style="width: 100px; line-height: 35px; height: 35px">
                      中心纬度：
                    </div>
                    <el-input v-model="inputLatWave" :disabled="!isEditingWave2" style="width: 290px"
                      placeholder="Please input" />
                    <span style="margin-top: 20px; margin-left: 25px">
                      <el-button v-if="!isEditingWave2" type="primary" @click="changeLatWave"
                        style="margin-left: 30px">更改</el-button>
                      <el-button v-else type="warning" @click="okEditingWave2">确定</el-button>
                    </span>
                  </div>
                  <div>
                    <div style="width: 100px; line-height: 35px; height: 35px">
                      缩放层级：
                    </div>
                    <el-input v-model="inputScaleWave" :disabled="!isEditingWave3" style="width: 290px"
                      placeholder="Please input" />
                    <span style="margin-top: 20px; margin-left: 25px">
                      <el-button v-if="!isEditingWave3" type="primary" @click="changeScaleWave"
                        style="margin-left: 30px">更改</el-button>
                      <el-button v-else type="warning" @click="okEditingWave3">确定</el-button>
                    </span>
                  </div>
                  <div style="text-align: center">
                    <el-button type="primary" style="margin: 15px 25px">从地图获取</el-button>
                  </div>
                </div>
              </el-card>
            </div>
          </el-collapse-item>
          <el-collapse-item title="海流视角" name="4">
            <div style="padding-left: 20px">
              <el-card style="max-width: 35vw; margin: 15px 0">
                <template #header>海流数据源配置 </template>

                <div>
                  <!-- <div style="margin-top: 5px">
            <div style="width: 100px; line-height: 35px; height: 35px">
              海流nc模板：
            </div>
            <el-input
              v-model="inputCurrentNc"
              :disabled="!isEditingCurrentNc"
              style="width: 290px"
              placeholder="Please input"
            />
            <span style="margin-top: 20px; margin-left: 25px">
              <el-button
                v-if="!isEditingCurrentNc"
                type="primary"
                @click="changeCurrentNc"
                style="margin-left: 30px"
                >更改</el-button
              >
              <el-button v-else type="warning" @click="okEditingCurrentNc"
                >确定</el-button
              >
            </span>
          </div> -->
                  <div style="margin-bottom: 20px">
                    <div style="width: 100px; line-height: 35px; height: 35px">
                      中心经度：
                    </div>
                    <el-input v-model="inputLonCurrent" :disabled="!isEditingCurrent1" style="width: 290px"
                      placeholder="Please input" />
                    <span style="margin-top: 20px; margin-left: 25px">
                      <el-button v-if="!isEditingCurrent1" type="primary" @click="changeLonCurrent"
                        style="margin-left: 30px">更改</el-button>
                      <el-button v-else type="warning" @click="okEditingCurrent1">确定</el-button>
                    </span>
                  </div>
                  <div style="margin-bottom: 20px">
                    <div style="width: 100px; line-height: 35px; height: 35px">
                      中心纬度：
                    </div>
                    <el-input v-model="inputLatCurrent" :disabled="!isEditingCurrent2" style="width: 290px"
                      placeholder="Please input" />
                    <span style="margin-top: 20px; margin-left: 25px">
                      <el-button v-if="!isEditingCurrent2" type="primary" @click="changeLatCurrent"
                        style="margin-left: 30px">更改</el-button>
                      <el-button v-else type="warning" @click="okEditingCurrent2">确定</el-button>
                    </span>
                  </div>
                  <div>
                    <div style="width: 100px; line-height: 35px; height: 35px">
                      缩放层级：
                    </div>
                    <el-input v-model="inputScaleCurrent" :disabled="!isEditingCurrent3" style="width: 290px"
                      placeholder="Please input" />
                    <span style="margin-top: 20px; margin-left: 25px">
                      <el-button v-if="!isEditingCurrent3" type="primary" @click="changeScaleCurrent"
                        style="margin-left: 30px">更改</el-button>
                      <el-button v-else type="warning" @click="okEditingCurrent3">确定</el-button>
                    </span>
                  </div>
                  <div style="text-align: center">
                    <el-button type="primary" style="margin: 15px 25px">从地图获取</el-button>
                  </div>
                </div>
              </el-card>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <div id="leafletMapContain"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, watch } from "vue";
import Config from "../system/class_config_typhoon";
import L from "leaflet";
// import { bm, bmInfo } from "@/stores/chun.js";
import { getViewByTypeAndDepartId, addOrEditView } from "@/network/net.js";
import { ElMessage } from 'element-plus'

let token = sessionStorage.getItem("token");
let bm = sessionStorage.getItem("bm");
let bmInfo = sessionStorage.getItem("bmInfo");

bm = ref(bm);
bmInfo = ref(JSON.parse(bmInfo));

bm.value = bmInfo.value[1].name;


onMounted(() => {

})

const data = reactive({
  lat: '',
  lon: '',
  zoom: ''
})
const views = ref([
  {
    name: '系统默认视角',
    value: 'default'
  },
  {
    name: '海风视角',
    value: 'wind'
  },
  {
    name: '海浪视角',
    value: 'wave'
  },
  {
    name: '海流视角',
    value: 'current'
  }
])
const view = ref(views.value[0])
const handleGetData = () => {
  data.lat = Config.map.getCenter().lat?.toFixed(6);
  data.lon = Config.map.getCenter().lng?.toFixed(6);
  data.zoom = Config.map.getZoom();
}

const handleSave = () => {

  let bmId = bmInfo.value.find(item => item.name === bm.value).id;
  addOrEditView(token, {
    type: view.value.value,
    departId: bmId,
    value: JSON.stringify(data)
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success("保存成功");
    } else {
      ElMessage.error("保存失败");
    }
  })
}

watch(data, (val) => {
  if (data.lat && data.lon && data.zoom) {
    if (Config.map) {
      Config.map.setView([val.lat, val.lon], val.zoom);
    }
  }
})

watch([view, bm], (val) => {
  let bmId = bmInfo.value.find(item => item.name === bm.value).id;

  getViewByTypeAndDepartId(token, {
    type: view.value.value,
    departId: bmId
  }).then(res => {
    if (res.data.code == 200) {
      let result = JSON.parse(res.data.data.value);
      data.lat = result.lat;
      data.lon = result.lon;
      data.zoom = result.zoom;
    } else {
      data.lat = '';
      data.lon = '';
      data.zoom = '';
      // 暂未配置
      ElMessage.info("暂未配置");
    }
  })
}, {
  immediate: true
})
// 30.245361, 120.962109 , 9
const inputLon = ref(120.962109);
const inputLat = ref(30.245361);
const inputScale = ref(9);
const inputCurrentNc = ref("Wind_wq_sugon_wrf_YYYYMMDDHH.nc");
const inputWaveNc = ref("Wave_cjk_swan_YYYYMMDDHH.nc");
const inputWindNc = ref("Current_cjk_YYYYMMDDHH.nc");
const isEditing1 = ref(false);
const isEditing2 = ref(false);
const isEditing3 = ref(false);
const isEditingCurrentNc = ref(false);
const isEditingWindNc = ref(false);
const isEditingWaveNc = ref(false);

const initializeMap = () => {
  if (Config.map) {
    Config.map.remove();
  }
  let map = L.map("leafletMapContain", {}).setView(
    [`${inputLat.value}`, `${inputLon.value}`],
    `${inputScale.value}`
  );
  L.tileLayer(
    "http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=848089cab53a169cef2cabdc84c8f644"
  ).addTo(map);
  Config.map = map;
  // Config.AllLayers.zj.addTo(Config.map);
  L.tileLayer(
    "http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=848089cab53a169cef2cabdc84c8f644",
    {
      // subdomains : ['0', '1', '2', '3', '4', '5', '6', '7'],
      pane: "overlayPane",
      zIndex: 501,
    }
  ).addTo(map);

};
const initLeafletMap = () => {
  initializeMap();
};
onMounted(() => {
  initLeafletMap();
});
const changeLon = () => {
  isEditing1.value = true;
};
const changeLat = () => {
  isEditing2.value = true;
};
const changeScale = () => {
  isEditing3.value = true;
};
const changeWaveNc = () => {
  isEditingWaveNc.value = true;
};
const changeWindNc = () => {
  isEditingWindNc.value = true;
};
const changeCurrentNc = () => {
  isEditingCurrentNc.value = true;
};
const okEditing1 = () => {
  initializeMap();
  isEditing1.value = false;
};
const okEditing2 = () => {
  initializeMap();
  isEditing2.value = false;
};
const okEditing3 = () => {
  initializeMap();
  isEditing3.value = false;
};
const okEditingWaveNc = () => {
  // initializeMap();
  isEditingWaveNc.value = false;
};
const okEditingWindNc = () => {
  // initializeMap();
  isEditingWindNc.value = false;
};
const okEditingCurrentNc = () => {
  // initializeMap();
  isEditingCurrentNc.value = false;
};
</script>
<style lang="less" scoped>
.Dom {
  width: 90vw;
  height: 90vh;
  display: flex;
}

.leftDom {
  width: 40vw;
  margin-top: 5px;
  // margin-left: 15px; 
  // max-height: 88vh;
  overflow-y: auto;
}

#leafletMapContain {
  // width: 45vw;
  flex: 1;
  // height: 85vh;
  z-index: 1;
  margin-top: 15px;
}

:deep(.el-collapse) {
  border: 0 solid #e6e6e6e6;
}

:deep(.el-collapse-item__header) {
  background: #e6e6e6e6;
  padding-left: 25px;
}

:deep(.el-collapse-item__wrap) {
  background: #e6e6e688;
}
</style>
